<template>
  <div>
          <a-form-model
                  ref="ruleForm"
                  :model="params"
                  layout="inline"
                  class="search-form"
          >
            <a-card :bordered="false">
            <a-form-model-item label="流程分类" prop="categoryId">
              <category-select v-model="params.categoryId"></category-select>
            </a-form-model-item>
            <a-form-model-item label="流程名称" prop="processDefinitionName">
              <a-input v-model="params.processDefinitionName" placeholder="流程名称" />
            </a-form-model-item>
            <a-form-model-item label="流程key" prop="processDefinitionKey">
              <a-input v-model="params.processDefinitionKey" placeholder="流程key" />
            </a-form-model-item>
            <a-form-model-item label="流程实例ID" prop="processInstanceId">
              <a-input v-model="params.processInstanceId" placeholder="流程实例ID" />
            </a-form-model-item>
            <a-form-model-item label="业务编号" prop="businessKey">
              <a-input v-model="params.businessKey" placeholder="业务编号" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="handleSearch">
                搜索
              </a-button>
              <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
                重置
              </a-button>
            </a-form-model-item>
              </a-card>
          </a-form-model>
         <a-card>
          <a-table
                  bordered
                  :columns="columns"
                  :row-key="record => record.id"
                  :data-source="data"
                  :pagination="pagination"
                  :loading="loading"
                  size="middle"
                  @change="handleTableChange"
          >
            <template slot="suspended" slot-scope="text , record">
              <a-switch checked-children="启用" un-checked-children="禁用" :loading="record.loading" @change="onStateChange(record)" :checked="!record.suspended" />
            </template>
            <template slot="operation" slot-scope="text , record">
              <a-popconfirm
                      title="确定删除吗?"
                      @confirm="() => onDelete(record)"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a @click="() => onDownload(record)">导出</a>
              <a-divider type="vertical" />
              <a @click="() => onDebug(record)">发起流程</a>
            </template>
          </a-table>
        </a-card>
  </div>

</template>
<script>
import { statusMap, pageRunning, removeRunning, updateRunningState } from '@/api/process'
import CategorySelect from '../category/components/CategorySelect'
export default {
  name: 'ProcessRunning',
  components: {
    CategorySelect
  },
  data() {
    return {
      columns: [
        {
          title: '流程实例ID',
          dataIndex: 'id',
          ellipsis: true
        },
        {
          title: '流程key',
          dataIndex: 'key',
          ellipsis: true
        },
        {
          title: '流程名称',
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: '业务编号',
          dataIndex: 'businessKey',
          ellipsis: true
        },
        {
          title: '分类',
          dataIndex: 'categoryName',
          ellipsis: true
        },
        {
          title: '版本号',
          dataIndex: 'processDefinitionVersion',
          ellipsis: true
        },
        {
          title: '发起人',
          dataIndex: 'startUserId',
          ellipsis: true
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          ellipsis: true
        },
        {
          title: '租户编号',
          dataIndex: 'tenantId',
          ellipsis: true
        },
        {
          title: '状态',
          dataIndex: 'suspended',
          ellipsis: true,
          scopedSlots: { customRender: 'suspended' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      loading: false,
      pagination: { showSizeChanger: true, showTotal: total => `共 ${total} 条数据` },
      params: {
        page: 1,
        limit: 10,
        processDefinitionKey: '',
        processDefinitionName: '',
        processInstanceId: '',
        businessKey: '',
        category: ''
      },
      statusMap: statusMap,
      data: []
    }
  },
  created() {
    this.handleLoad()
  },
  methods: {
    handleSearch() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.params.page = 1
          this.handleLoad()
        }
        return false
      })
    },
    handleReset() {
      this.$refs.ruleForm.resetFields()
    },
    handleTableChange(pagination, filters, sorter) {
      this.params = {
        ...this.params,
        limit: pagination.pageSize,
        page: pagination.current
      }
      this.handleLoad()
    },
    handleLoad(params) {
      this.loading = true
      if (params) {
        this.params = { ...this.params, ...params }
      }
      this.pagination.current = this.params.page
      pageRunning(this.params).then(({ data }) => {
        const pagination = { ...this.pagination }
        this.data = data.records
        pagination.total = data.total
        this.pagination = pagination
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    onDelete(row) {
      removeRunning({ deploymentId: row.deploymentId }).then(res => {
        res.success ? this.$message.success('删除成功') : this.$message.error('删除失败')
        this.handleLoad({ page: 1 })
      })
    },
    onStateChange(row) {
      row.loading = true
      const state = row.suspended ? 'active' : 'suspend'
      updateRunningState({ state: state, processInstanceId: row.id }).then(res => {
        if (res.success) {
          row.suspended = !row.suspended
          this.$message.success('更新成功')
        } else {
          this.$message.success('更新失败')
        }
        row.loading = false
      })
    },
    onSelectChange(id) {
      this.params.category = id
      this.handleLoad()
    }
  }
}
</script>
